<template>
	<view class="page">
		<view class="header">
			<view class="header-1"></view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<u-tabs lineColor="#2265EE" lineWidth="45" style="width: 100%;background-color: #fff;" :list="uTabslist"
			:scrollable="false" :activeStyle="{color: '#323233',fontWeight: '700',transform: 'scale(1.05)'}"
			:inactiveStyle="{color: '#969799',transform: 'scale(1)'}" :current="showIndex" @click="uTabsclick">
		</u-tabs>
		<!-- 培训列表（培训考试中心） -->
		<scroll-view class="hv90 pr" scroll-y refresher-background="#eef6fc" v-show="showIndex == 0">
			<view class="content">
				<view class="searchBox">
					<u-search v-model="userFormLine.name" class="uSearch" :show-action="false" :clearabled="true"
						height="40" bg-color="#fff" search-icon="../../static/common/search.jpg" border-color="#242424"
						placeholder="请选择或输入专题名称" placeholder-color="#8C8C8C" @search="uSearchChange"
						:input-style="{color: '#242424'}">
					</u-search>
				</view>
				<view class="hv80">
					<template v-if="trainingLists.length > 0">
						<view class="item" v-for="(item, index) in trainingLists" :key='index'
							v-if="!(item.detail.enabledMark == 10 || !item.detail.enabledMark)">
							<view class="title" @click="tolearnWindow(item.id)">{{ item.name }}</view>
							<view class="oneButtons space-between">
								<view>
									<template v-if="item.detail.enabledMark">
										<view class="examBtn3" v-if="item.detail.enabledMark == 10">待自测</view>
										<view class="examBtn1" v-else-if="item.detail.enabledMark == 20">学习中</view>
										<view class="examBtn2" v-else-if="item.detail.enabledMark == 30">已完成</view>
									</template>
									<template v-else>
										<view class="examBtn1">待自测</view>
									</template>
								</view>
								<view class="btn1" @click="tolearnWindow(item.id)">去学习
									<image src="/static/tab/arrowRight.png"></image>
								</view>
							</view>
							<view class="twoButtons flex">
								<template v-if="item.theoryScore && item.examScore">
									<view class="examScores">
										<text>理论考试</text>
										<text :class="['curScore' , item.theoryScore >= item.passLine ? 'green' : 'red']">{{ item.theoryScore }}</text>分
									</view>
									<view class="examScores">
										<text>技能考试</text>
										<text :class="['curScore' , item.examScore >= item.passLine ? 'green' : 'red']">{{ item.examScore }}</text>分
									</view>
								</template>
								<template v-else>
									<view class="btn1" @click="baoMing2(item.detail)"
										v-if="item.detail.enabledMark == 10 || !item.detail.enabledMark"
										style="min-width: 50px; text-align: center;">报名</view>
									<view v-for="(citem, cindex) in item.detail.stageList" :key="cindex"
										v-if="citem.sortCode == 0" style="display: flex">
										<view :class="['btn1', citem.enabledMark == 30 ? '' : 'disabled']"
											@click="citem.enabledMark == 30 ? gotoUrl(2, item) : ''"
											style="margin-right: 10px;">理论考试</view>
										<view :class="['btn2', citem.enabledMark == 30 ? '' : 'disabled']"
											@click="citem.enabledMark == 30 ? gotoUrl(1, item) : ''">技能考试</view>
									</view>
								</template>	
							</view>
						</view>
						<u-loadmore :status="status" v-if="trainingLists.length" line icon-color="#028BF7"
							color="#c1c1c1" font-size="24" marginTop="30" marginBottom="10" />
						<u-gap height="1" bg-color="#f3f4f9"></u-gap>
					</template>
					<template v-else>
						<view class="none-data" v-if="loadingStatus">
							<image src="@/static/common/noData.png" class="noData"></image>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
		<!-- 考試列表 -->
		<scroll-view class="hv90 pr" scroll-y refresher-background="#eef6fc" v-show="showIndex == 1">
			<view class="content">
				<view class="searchBox space-between">
					<u-search v-model="exmainFormLine.fullName" class="uSearch" :show-action="false" :clearabled="true"
						height="40" bg-color="#fff" search-icon="../../static/common/search.jpg" border-color="#242424"
						placeholder="请输入考试名称" placeholder-color="#8C8C8C" @search="uSearchChange"
						:input-style="{color: '#242424'}"></u-search>
					<view class="selectOption" @click="dateClick()">
						<image src="/static/tab/arrowBottom.png" class="arrowBottom"></image>
						<text>状态</text>
					</view>
				</view>
				<u-picker :show="statusShow" :columns="statusList" keyName="label" @confirm="statusConfirm"></u-picker>
				<view class="hv80">
					<template v-if="myExamLists.length > 0">
						<view class="item" v-for="(item,index) in myExamLists" :key='index' 
							v-if="!(item.enabledMark == -1 || !item.enabledMark)" @click="lookExamDetail(item)">
							<view class="title">{{ item.fullName }}</view>
							<view class="examNewBtn">
								<view>
									<!-- 考试状态 -->
									<view class="examBtn3" v-if="item.examStatus == 0">未开始</view>
									<view class="examBtn2" v-else-if="item.examStatus == 1">进行中</view>
									<view class="examBtn4" v-else-if="item.examStatus == 2">已结束</view>
								</view>
								<view>
									 <!-- 参与状态 空-全部，0-未通过、1-已通过、3-未参与 -->
									<view class="examBtn4" v-if="item.examTask && item.examTask.enabledMark == 0">未开始</view>
									<view class="examBtn3" v-else-if="item.examTask && item.examTask.enabledMark == 1">已通过</view>
									<view class="examBtn2" v-else-if="item.examTask && item.examTask.enabledMark == 2">未参与</view>
								</view>
							</view>
							<view class="twoButtons flex">
								<template v-if="item.examTask">
									<view :class="['btn2', item.examStatus == 1 ? '' : 'btn2-disabled']"
										@click="exmainClick(item,index)" v-if="item.examTask.enabledMark == 0">考 试
									</view>
									<template v-if="item.examTask.enabledMark == 1">
										<view class="examTime">{{ item.examTask.startTime.split(" ")[0] }}</view>
										<view class="examDes">
											<view class="examScore"><text>{{ item.examTask.myScore }}</text>分</view>
										</view>
									</template>
								</template>
								<template v-else>
									<view :class="['btn2', item.examStatus == 1 ? '' : 'btn2-disabled']"
										@click="exmainClick(item,index)">考 试</view>
								</template>
							</view>
						</view>
						<u-loadmore :status="status" v-if="myExamLists.length" line icon-color="#028BF7"
							color="#c1c1c1" font-size="24" marginTop="30" marginBottom="10" />
						<u-gap height="1" bg-color="#f3f4f9"></u-gap>
					</template>
					<template v-else>
						<view class="none-data" v-if="loadingStatus">
							<image src="@/static/common/noData.png" class="noData"></image>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
		<!-- 科普列表 -->
		<scroll-view class="hv90 pr" scroll-y refresher-background="#eef6fc" v-show="showIndex == 2">
			<view class="hv80">
				<template v-if="scienceLists.length > 0">
					<view class="content">
						<template v-for="(item,index) in scienceLists" 
							v-if="!(item.detail.enabledMark == 10 || !item.detail.enabledMark)">
							<view class="item">
								<view class="title">{{ item.name }}</view>
								<view class="oneButtons space-between">
									<view>
										<template v-if="item.detail.process">
											<view class="examBtn2" v-if="item.detail.process >= 100 ">已完成</view>
											<view class="examBtn5" v-else>待学习</view>
										</template>
										<template v-else>
											<view class="examBtn5">待学习</view>
										</template>
									</view>
									<view class="btn1" @click="scienceWindow(item)">去学习 <image
											src="/static/tab/arrowRight.png"></image>
									</view>
								</view>
								<view class="twoButtons flex" v-if="item.detail.enabledMark == 10 || !item.detail.enabledMark">
									<view class="btn1" @click="baoMing(item.detail)"
										style="min-width: 50px; text-align: center;">报名</view>
								</view>
							</view>
						</template>
					</view>
					<u-loadmore :status="status" v-if="scienceLists.length" line icon-color="#028BF7" color="#c1c1c1"
						font-size="24" marginTop="30" marginBottom="10" />
					<u-gap height="1" bg-color="#f3f4f9"></u-gap>
				</template>
				<template v-else>
					<view class="none-data" v-if="loadingStatus">
						<image src="@/static/common/noData.png" class="noData"></image>
					</view>
				</template>
			</view>
		</scroll-view>
		<!-- 我的考试-提示弹窗 -->
		<u-modal :show="tipsShow" :title="tipsTitle" :showCancelButton="true" confirm-text="开始" class="uModals" @confirm="tipsConfirm"
			@cancel="tipsCancel">
			<view class="slot-content">
				<rich-text :nodes="tipsContent"></rich-text>
			</view>
		</u-modal>
		<!-- 科普-提示弹窗 -->
		<u-modal :show="mbShow" :title="mbTitle" :showCancelButton="true" confirm-text="确定报名" class="uModals" @confirm="mbConfirm"
			@cancel="mbCancel">
			<view class="slot-content">
				<rich-text :nodes="mbContent"></rich-text>
			</view>
		</u-modal>
		<!-- 培训中心-提示弹窗 -->
		<u-modal :show="mbShow2" :title="mbTitle" :showCancelButton="true" confirm-text="确定报名" class="uModals" @confirm="mbConfirm"
			@cancel="mbCancel">
			<view>
				<view>亲爱的培训考试用户，请认真阅读以下温馨提示：</view>
				<view class="slot-content">
					<rich-text :nodes="mbContent2"></rich-text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		myExamList,
		getScopeList,
		getSubjectDetail,
		studySubject
	} from '@/api/index'
	import {
		getDictionaryDataList
	} from '@/api/dictionary'
	export default {
		data() {
			return {
				showIndex: "0",
				fileImage: this.$globalSetting.fileImage,
				searchIcon: '@/static/common/search.jpg',
				userFormLine: {
					name: "",
				},
				exmainFormLine: {
					fullName: "",
					timeMark: 0,
				},
				isTriggered: false,
				isRefreshing: false, // 标记是否正在刷新
				loadingStatus: false,
				myExamLists: [],
				trainingLists: [],
				scienceLists: [],
				certificateOptions: [],
				categoryId: null,
				categoryId2: null,
				currentPage: 1,
				pageSize: 10,
				status: 'more',
				reload: false,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				},
				loadingStatus: false,
				uTabslist: [
					{
						name: '培训列表'
					},
					{
						name: '考试列表'
					},
					{
						name: '科普列表'
					}
				],
				statusList: [
					[{
							label: "全部",
							value: 0,
						},
						{
							label: "未开始",
							value: 10,
						},
						{
							label: "进行中",
							value: 20,
						},
						{
							label: "已结束",
							value: 30,
						}
					]
				],
				statusShow: false,
				tipsShow: false,
				tipsTitle: '注意事项',
				tipsContent: `1、最终成绩取第一次过及格线的分数，复考不更新成绩。<br>2、考试中途退出需重新考。<br>确认知晓以上信息后,点击“开始”进入正式考试!`,
				mbShow: false,
				mbShow2: false,
				mbTitle: '注意事项',
				mbContent2: `亲爱的培训考试用户，请认真阅读以下温馨提示：<br>1、专题内每个视频需自测并通过；<br>2、自测全通过才可参加专题技能/理论考试；<br>3、最终成绩取第一次过及格线的分数。`,
				mbContent: `科普专题报名后，需学习完其所有视频才可以领取证书哦~`,
				currentExmainId: null,
				currentItem: {},
			}
		},
		async onLoad() {
		},
		async onShow() {
			// 大众权限判断
			this.isDzFlag = uni.getStorageSync('isDzFlag');
			if (this.isDzFlag) {
				this.uTabslist = [
					{
						name: '科普列表'
					}
				]
				this.showIndex = 0;
				this.$forceUpdate();
			}else {
				this.uTabslist =  [
					{
						name: '培训列表'
					},
					{
						name: '考试列表'
					},
					{
						name: '科普列表'
					}
				];
				this.$forceUpdate();
			}
			
			// jiekou 
			let response = await getDictionaryDataList('559344237955514629', {
				keyword: '',
				isTree: 0
			});
			this.certificateOptions = response.data.list;
			
			// 从首页点击跳转过来判断
			let storages = uni.getStorageSync('currentClick');
			if (storages.flag && storages.type >= 0) {
				this.showIndex = storages.type;
				this.refresh();
				this.$forceUpdate();
			}
		},
		methods: {
			getEventStatus(startDatetime, endDatetime) {
				let startTime = new Date(startDatetime).getTime();
				let endTime = new Date(endDatetime).getTime();
				let currentTime = new Date().getTime();
				if (currentTime < startTime) {
					return '0';
				} else if (currentTime >= startTime && currentTime <= endTime) {
					return '1';
				} else {
					return '2';
				}
			},
			refresh() {
				this.reload = false;
				this.currentPage = 1;
				this.status = 'more';
				if (this.showIndex == 0) {
					// 培训列表
					this.trainingLists = [];
					this.getListJson();
				} else if (this.showIndex == 1) {
					// 考试列表
					this.myExamLists = [];
					this.getMyExamList();
				} else if (this.showIndex == 2) {
					// 科普列表
					this.scienceLists = [];
					this.getScienceListJson();
				}
			},
			uSearchChange(e) {
				this.userFormLine.name = e;
				this.refresh();
			},
			// 培训考试中心数据
			getListJson() {
				for (let i in this.certificateOptions) {
					if (this.certificateOptions[i].enCode == 'Leader') {
						this.categoryId = this.certificateOptions[i].id;
						this.getList();
					}
				}
			},
			// 科普
			getScienceListJson() {
				for (let i in this.certificateOptions) {
					if (this.certificateOptions[i].enCode == 'Common') {
						this.categoryId2 = this.certificateOptions[i].id;
						this.getScienceList();
					}
				}
			},
			// 培训考试中心
			getList() {
				if (!this.categoryId) return;
				getScopeList({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					categoryId: this.categoryId,
					...this.userFormLine,
					enabledMark: 1,
				}).then((res) => {
					let json = res.data.list;
					if (json != null && json.length > 0) {
						if (res.data.pagination.total <= this.currentPage * this.pageSize) {
							this.status = 'noMore';
							this.reload = true;
						} else {
							this.reload = false;
						}
						// 处理数据
						const detailPromises = json.map(item => {
							return getSubjectDetail(item.id).then(detailRes => {
								if (detailRes.code === 200) {
									item.detail = detailRes.data;
								}
								return item;
							});
						});
						Promise.all(detailPromises).then(completedItems => {
							this.trainingLists = this.trainingLists.concat(completedItems);
							
							console.log(this.trainingLists,9999)
						
						});
					}
					uni.stopPullDownRefresh();
					this.loadingStatus = true;
				});
			},
			// 科普
			getScienceList() {
				getScopeList({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					categoryId: this.categoryId2,
					...this.userFormLine,
					enabledMark: 1,
				}).then((res) => {
					let json = res.data.list;
					if (json != null && json.length > 0) {
						if (res.data.pagination.total <= this.currentPage * this.pageSize) {
							this.status = 'noMore';
							this.reload = true;
						} else {
							this.reload = false;
						}
						// 处理数据
						const detailPromises = json.map(item => {
							return getSubjectDetail(item.id).then(detailRes => {
								if (detailRes.code === 200) {
									item.detail = detailRes.data;
								}
								return item;
							});
						});
						Promise.all(detailPromises).then(completedItems => {
							this.scienceLists = this.scienceLists.concat(completedItems);
							// completedItems.forEach(item => {
							//   item.detail.subjectStageRelationListNew = [];
							//   let stageList = item.detail.stageList;
							//   if (stageList) {
							// 	stageList.forEach(fItem => {
							// 	  let subjectStageRelationList = fItem.subjectStageRelationList;
							// 	  subjectStageRelationList.forEach(sItem => {
							// 		item.detail.subjectStageRelationListNew.push(sItem);
							// 	  });
							// 	});
							//   }
							// });
							// this.scienceLists = completedItems;
						});
					}
					uni.stopPullDownRefresh();
					this.loadingStatus = true;
				});
			},
			// 我的考试（考试列表）
			async getMyExamList() {
				let params = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					enabledMark: '',
					fullName: '',
					sidx: '',
					sort: 'desc',
					timeMark: 0,
					categoryId: 4,
					...this.exmainFormLine
				}
				let response = await myExamList(params);
				this.myExamLists = response.data.list;
				this.myExamLists.forEach(item => {
					if ((item.startDatetime == '' && item.endDatetime == '') || (item.startDatetime == null && item.endDatetime == null)) {
					  item.examStatus = 1;
					}
					else {
					  item.examStatus = this.getEventStatus(item.startDatetime, item.endDatetime);
					}
				})
			},
			// 点击tab切换
			uTabsclick(val) {
				this.showIndex = val.index;
				let obj = {
					type: this.showIndex,
					flag: true
				}
				uni.setStorageSync('currentClick', obj);
				this.refresh();
			},
			dateClick() {
				this.statusShow = true;
			},
			statusConfirm(e) {
				this.exmainFormLine.timeMark = e.value[0].value;
				this.statusShow = false;
				this.refresh();
			},
			gotoUrl(val, item) {
				if (item.detail && item.detail.stageList && item.detail.stageList.length > 0) {
					const id = item.detail.stageList[val].subjectStageRelationList[0].objectId;
					// 去考试
					uni.navigateTo({
						url: `/pages/examinationInterface/examinationInterface?id=${id}`
					});
				}
			},
			baoMing(item) {
				this.currentItem = item;
				this.mbShow = true;
			},
			baoMing2(item) {
				this.currentItem = item;
				this.mbShow2 = true;
			},
			// 跳转培训
			tolearnWindow(id) {
				uni.navigateTo({
					url: '/pages/learnCenter/learnCenterList?id=' + id
				})
			},
			// 跳转考试
			exmainClick(item, index) {
				// 不需要测试的时候放开
				if (item.examStatus != 1) {
					return;
				}
				this.tipsShow = true;
				this.currentExmainId = item.id;
			},
			// 跳转科普视频
			scienceWindow(item) {
				uni.navigateTo({
					url: `/pages/learnCenter/scienceList?id=${item.id}`
				})
			},
			tipsConfirm() {
				this.tipsShow = false;
				let id = this.currentExmainId;
				uni.navigateTo({
					url: '/pages/examinationInterface/examinationInterface?id=' + id
				})
			},
			tipsCancel() {
				this.tipsShow = false;
			},
			mbConfirm(type) {
				if (!this.currentItem.id) return;
				studySubject(this.currentItem.id).then(res => {
					if (res.code == 200) {
						this.showSuccess('报名成功', 'none');
						if (type == 1) {
							this.mbShow = false;
						}
						else {
							this.mbShow2 = false;
						}
						this.refresh();
						// this.getListJson();
					}
				});
			},
			mbCancel(type) {
				if (type == 1) {
					this.mbShow = false;
				}
				else {
					this.mbShow2 = false;
				}
			},
			lookExamDetail(item) {
				if (!item.examTask || item.examTask.enabledMark != 1) {
					return;
				}
				// 跳转到查看考试详情页面
				uni.navigateTo({
					url: `/pages/examinationInterface/examinationView?id=${item.examTask.id}`
				});
			},
			// // 获取数据
			// async initData() {
			// 	let response = await getDictionaryDataList('559344237955514629', {
			// 		keyword: '',
			// 		isTree: 0
			// 	});
			// 	this.certificateOptions = response.data.list;
			// },
			// reachBottom() {
			// 	if (!this.reload) {
			// 		this.status = 'loading';
			// 		this.currentPage++;
					
			// 		// this.getList();
			// 		this.refresh();
					
			// 	} else {
			// 		this.status = 'nomore';
			// 	}
			// },
			// refresherrefresh() {  console.log(111111111)
			// 	if (this.isRefreshing) return; // 如果正在刷新，直接返回
			// 	this.isRefreshing = true; // 标记为刷新中
			// 	this.isTriggered = true;
			// 	this.refresh();
			// 	setTimeout(() => {
			// 		this.isTriggered = false;
			// 		this.isRefreshing = false; // 重置标记
			// 	}, 2000);
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.examNewBtn {
		width: 100%; 
		display: flex; 
		justify-content: space-between;
		margin: 10px 0;
	}
	.examScores {
		font-size: 12px;
		color: #969799;
		margin-left: 15px;
	}
	.curScore {
		font-size: 20px;
		padding: 0 6px;
		font-weight: bold;
	}
	.curScore.red {
		color: red;
	}
	.curScore.green {
		color: green;
	}
	
	.hv90 {
		width: 100%;
		height: 85%;
	}

	.hv80 {
		height: 80vh;
	}

	.twoButtons {
		width: 100%;
		justify-content: end;
		gap: 10px;
		// padding: 15px 0;
		// padding-bottom: 0 !important;
		box-sizing: border-box;
	}

	.twoButtons .btn1 {
		min-width: 66px;
		text-align: center;
		font-size: 13px;
		border-radius: 18px;
		padding: 7px 10px;
		border: 1px solid #2265EE !important;
		background: #fff !important;
		color: #416eed !important;
	}

	.twoButtons .btn2 {
		min-width: 66px;
		text-align: center;
		font-size: 13px;
		border-radius: 18px;
		padding: 7px 10px;
		border: 1px solid #2265EE !important;
		background: #2265EE !important;
		color: #fff !important;
	}

	.btn2.btn2-disabled {
		border: 1px solid #F0EFF4 !important;
		background-color: #F0EFF4 !important;
		color: #8B8A92 !important;
	}

	.oneButtons {
		width: 100%;
		// border-bottom: 1px solid #EBEDF0;
		padding-bottom: 10px;
		padding-top: 10px;
		display: flex;
		align-items: center;
	}
	
	.oneButtons .status {
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #333;
		color: #fff;
		font-size: 13px;
	}

	.oneButtons .btn1 {
		height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #969799;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		float: right;
		flex: 1;
		text-align: right;
	}

	.oneButtons .btn1 image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: bottom;
	}

	.page .content .item {
		padding: 15px;
		margin: 16px !important;
		box-sizing: border-box;
		height: auto !important;
	}

	.uSearchBox {
		padding: 20px 20px 0 20px;
		box-sizing: border-box;
	}

	.infoTop {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		color: #8C8C8C;
		font-size: 28rpx;
	}

	.infoTop>.tj_cost_icon {
		font-size: 24rpx;
		color: #bfbfbf;
		padding-left: 10rpx;
	}

	.searchBox {
		padding: 0 32rpx;
		margin-top: 16px;
	}

	.uSearch {
		position: relative;
	}

	.uSearch .u-content {
		border: 4rpx solid rgb(36, 36, 36) !important;
	}

	.uSearch .u-input {
		margin: 0 16rpx !important;
	}

	.uSearch .u-content {
		padding: 0 24rpx !important;
	}

	.uSearch .u-content {
		padding: 0 24rpx !important;
	}

	.uSearch.seviceSearch .u-content {
		padding: 0 0 0 180rpx !important;
	}

	.selectOption .tj_cost_icon {
		font-size: 30rpx;
		margin-right: 10rpx;
		margin-left: 24rpx;
		color: #000000;
	}

	.selectOption {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
		color: #242424;
	}

	.arrowBottom {
		width: 20px;
		height: 20px;
		vertical-align: sub;
	}

	.examBtn1,
	.examBtn2,
	.examBtn3,
	.examBtn4,
	.examBtn5 {
		width: 44px;
		height: 20px;
		line-height: 20px;
		border-radius: 2px;
		font-size: 12px;
		text-align: center;
	}

	.examBtn1 {
		// color: #8B8A92;
		// background: #F0EFF4;
		color: #fff;
		background: #2265EE;
	}

	.examBtn2 {
		color: #fff;
		background: #323233;
	}

	.examBtn3 {
		color: #fff;
		background: #1DB712;
	}

	.examBtn4 {
		color: #8f8f8f;
		background-color: #efefef;
	}

	.examBtn5 {
		color: #fff;
		background-color: #FF7E00;
	}
	
	.slot-content {
		font-size: 13px;
		line-height: 23px;
	}

	.examDes {
		color: #969799;
		flex: 1;
	}

	.examTime {
		color: #969799;
		flex: 1;
		line-height: 36px;
	}

	.examScore {
		text-align: right;
	}

	.examScore>text {
		color: #2265EE;
		font-size: 25px;
		margin-right: 4px;
	}

	.btn1.disabled,
	.btn2.disabled {
		color: #8B8A92 !important;
		border: 1px solid #F0EFF4 !important;
		background: #F0EFF4 !important;
	}

	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		background: #F6F8FC;

		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				flex: 1;
			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.content {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;
			// gap: 32rpx;

			.title {
				// margin: 32rpx 0 0 32rpx;
				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
				font-weight: 500;
				font-size: 32rpx;
				color: #323233;
				line-height: 48rpx;
				text-align: left;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-style: normal;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item {
				margin: 0 32rpx 0 32rpx;
				height: 278rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					width: 100%;
					display: flex;
					margin-left: 0;
					flex-direction: row;
					position: relative;
					text-align: left;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 44rpx;
					font-style: normal;
				}

				.twoButton {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;
						width: 88rpx;
						height: 40rpx;
						background: #1DB712;
						border-radius: 4rpx;
						text-align: left;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.btn11 {
						background: #2265EE !important;
					}

					.btn12 {
						background: #323233 !important;
					}

					.btn2 {
						position: absolute;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40rpx;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 28rpx;
						color: #969799;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.line {
					margin-top: 80rpx;
					width: 622rpx;
					height: 2rpx;
					background: #EBEDF0;
				}

				.twoButton21 {
					.btn1 {
						background: #fff !important;
						border: 2rpx solid #E2E7F5 !important;
						color: #8B8A92 !important;
					}

					.btn2 {
						background: #F0EFF4 !important;
						color: #8B8A92 !important;
					}
				}

				.twoButton22 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					/* 添加这一行以使子元素靠右对齐 */
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						background: #fff;
						color: #646566;
						border: none;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.llText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #D91515;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}

					.btn2 {
						background: #fff;
						color: #646566;
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.jnText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #2265EE;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}

				.twoButton2 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						width: 176rpx;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2rpx solid #2265EE;
						font-weight: 400;
						font-size: 28rpx;
						color: #2265EE;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}

					.btn2 {
						width: 176rpx;
						height: 64rpx;
						background: #2265EE;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 36rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}

		.content1 {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;

			.title {
				margin: 32rpx 0 0 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #323233;
				line-height: 48rpx;
				text-align: left;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-style: normal;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item {
				margin: 0 32rpx 0 32rpx;
				height: 278rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					width: 608rpx;
					display: flex;
					margin-left: 0;
					flex-direction: row;
					position: relative;
					text-align: left;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 44rpx;
					font-style: normal;
				}

				.twoButton {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;
						width: 88rpx;
						height: 40rpx;
						background: #1DB712;
						border-radius: 4rpx;
						text-align: left;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.btn11 {
						background: #2265EE !important;
					}

					.btn12 {
						background: #323233 !important;
					}

					.btn2 {
						position: absolute;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #969799;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.line {
					margin-top: 80rpx;
					width: 622rpx;
					height: 2rpx;
					background: #EBEDF0;
				}

				.twoButton2 {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;

						height: 40rpx;
						color: #969799;

						border-radius: 4rpx;
						text-align: left;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}


					.btn2 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;


						.score {
							font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
							font-weight: bold;
							font-size: 48rpx;
							color: #2265EE;
							line-height: 52rpx;
							text-align: left;
							font-style: normal;
						}

						.fen {
							margin: 0 0 0 8rpx;
							font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
							font-weight: 400;
							font-size: 24rpx;
							color: #646566;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}


					}

					.btn22 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 176rpx;
						height: 64rpx;
						color: #FFFFFF;
						background: #2265EE;
						border-radius: 36rpx;
					}

					.btn23 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 176rpx;
						height: 64rpx;
						color: #8B8A92;
						background: #F0EFF4;
						border-radius: 36rpx;
					}
				}
			}
		}

		.content2 {
			margin: 32rpx 0 0 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			// align-items: center;
			background: #FFF;
			justify-content: center;
			position: relative;
			// padding: 32rpx 0 0 0;

			.item {
				// width: 100%;
				// width: 686rpx;
				// height: 486rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				margin: 16px;

				.img {
					width: 686rpx;
					height: 386rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.button {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 88rpx;
					height: 40rpx;
					background: #323233;
					border-radius: 8rpx;
					font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-style: normal;
				}

				.button1 {
					background: #FF7E00 !important;
				}

				.content {

					display: flex;
					flex-direction: column;
					gap: 0;


					.title {
						margin: 16rpx 0 0 0;

						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 32rpx;
						color: #323233;

						line-height: 48rpx;
						text-align: left;
						font-style: normal;
					}

					.decrible {
						margin: 4rpx 0 0 0;

						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
						color: #969799;

						text-align: left;
						font-style: normal;
					}
				}
			}

		}
	}
</style>